<template>
  <div class="question">
    <el-card>
      <el-form :inline="true" :model="form">
        <el-form-item label="学科" prop="subject">
          <el-select v-model="form.subject" placeholder="请选择">
            <el-option
              v-for="item in questionData.subjectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>

        </el-form-item>
        <el-form-item label="阶段" prop="step">
          <el-select
            v-model="form.step"
            placeholder="请选择"
          >
            <el-option
              v-for="item in questionData.step"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            /></el-select>
        </el-form-item>
        <el-form-item label="企业" prop="enterprise">
          <el-select v-model="form.enterprise" placeholder="请选择">
            <el-option
              v-for="item in questionData.enterpriseList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="题型" prop="type">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option
              v-for="item in questionData.type"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-select v-model="form.difficulty" placeholder="请选择">
            <el-option
              v-for="item in questionData.difficulty"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="作者" prop="username">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option
              v-for="item in questionData.status"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="create_date">
          <el-date-picker v-model="form.create_date" />
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchEvent">搜索</el-button>
          <el-button @click="clearEvent">清除</el-button>
          <el-button type="primary" @click="addEvent">+新增试题</el-button>
          <el-button type="success" @click="exportExcel">Excel导出</el-button>

        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="padding:10px">
      <el-table :data="list" :cell-style="setCellStyle" style="">
        <el-table-column label="序号" width="50">
          <template v-slot="{$index}">
            <div>
              {{ (form.page-1)*form.limit + $index +1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="题目" prop="title">
          <template v-slot="{row}">
            <span v-html="row.title" />
          </template>
        </el-table-column>
        <el-table-column label="学科.阶段" prop="step" :formatter="formatterStep" />
        <el-table-column label="题型" prop="type" :formatter="formatterType" />
        <el-table-column label="企业" prop="enterprise" />
        <el-table-column label="创建者" prop="username" />
        <el-table-column label="状态" prop="status" :formatter="formatterStatus" />
        <el-table-column label="访问量" prop="reads" />
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button type="text" @click="editEvent(row)">编辑</el-button>
            <el-button type="text" @click="setStatus(row)">{{ row.status===0?'启用':'禁用' }}</el-button>
            <el-button type="text" @click="delEvent(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          :current-page.sync="form.page"
          :page-sizes="[1,5,10,50, 300,400]"
          :page-size.sync="form.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="sizeChange"
          @current-change="currentChange"
        />
      </div>
    </el-card>
    <Add ref="add" :question-data="questionData" @getData="getData" />
  </div>
</template>

<script>
import Add from './components/add.vue'
import jsCookie from 'js-cookie'
import { export_json_to_excel } from '@/vendor/Export2Excel'
import { questionList, questionRemove, subjectList, enterpriseList, questionStatus } from '@/api/question'
export default {
  components: {
    Add
  },
  data() {
    return {
      questionData: {
        enterpriseList: [],
        subjectList: [],
        step: [
          {
            id: 1,
            value: '初级'
          },
          {
            id: 2,
            value: '中级'
          },
          {
            id: 3,
            value: '高级'
          }
        ],
        // 题型
        type: [
          {
            id: '1',
            value: '单选'
          },
          {
            id: '2',
            value: '多选'
          },
          {
            id: '3',
            value: '简答'
          }
        ],
        // 难度
        difficulty: [
          {
            id: 1,
            value: '简单'
          },
          {
            id: 2,
            value: '一般'
          },
          {
            id: 3,
            value: '困难'
          }
        ],
        // 状态
        status: [
          {
            id: 0,
            value: '禁用'
          },
          {
            id: 1,
            value: '启用'
          }

        ]
      },
      list: [],
      form: {
        title: '', //	否	string	标题名称
        subject: '', //	否	int	学科id
        enterprise: '', //	否	int	企业id
        type: '', //	否	int	题目类型:1(单选),2(多选),3(简答)
        step: '', //	否	string	题目阶段:1(初级),2(中级),3(高级)
        username: '', //	否	string	作者
        status: '', //	否	int	状态:0(禁用),1(启用)
        difficulty: '', //	否	int	题目难度: 1(简单),2(一般),3(困难)
        create_date: '', //	否	string	创建日期
        page: 1, //	否	string	页码 默认为1
        limit: +jsCookie.get('setlimit') || 5
      },
      total: 100
    }
  },
  created() {
    this.getData()
    this.getSubjectList()
    this.getEnterpriseList()
  },

  methods: {
    // 获取题目列表
    async getData() {
      const res = await questionList(this.form)
      this.list = res.data.data.items
      this.total = res.data.data.pagination.total
      console.log(res)
    },
    // 获取学科列表
    async getSubjectList() {
      const res = await subjectList()
      this.questionData.subjectList = res.data.data.items
    },
    // 获取企业列表
    async getEnterpriseList() {
      const res = await enterpriseList()
      this.questionData.enterpriseList = res.data.data.items
    },

    formatterStep(row, column, cellValue, index) {
      const findItem = this.questionData.step.find(item => item.id === cellValue)
      return findItem ? (row.subject + '.' + findItem.value) : '-'
    },
    formatterType(row, column, cellValue, index) {
      const findItem = this.questionData.type.find(item => +item.id === cellValue)
      return findItem ? findItem.value : '-'
    },
    formatterStatus(row, column, cellValue, index) {
      const findItem = this.questionData.status.find(item => item.id === cellValue)
      return findItem ? findItem.value : '-'
    },
    setCellStyle({ row, column, rowIndex, columnIndex }) {
      if (row.status === 0 && columnIndex === 6) {
        return 'color:red'
      } else {
        return 'color:#606266'
      }
    },
    // 改变页容量
    sizeChange(limit) {
      jsCookie.set('setlimit', limit)
      this.form.page = 1
      this.getData()
    },
    // 改变页码
    currentChange() {
      this.getData()
    },
    // 搜索功能
    searchEvent() {
      this.form.page = 1
      this.getData(this.form)
    },
    // 清除功能
    clearEvent() {
      this.form = {
        title: '', //	否	string	标题名称
        subject: '', //	否	int	学科id
        enterprise: '', //	否	int	企业id
        type: '', //	否	int	题目类型:1(单选),2(多选),3(简答)
        step: '', //	否	string	题目阶段:1(初级),2(中级),3(高级)
        username: '', //	否	string	作者
        status: '', //	否	int	状态:0(禁用),1(启用)
        difficulty: '', //	否	int	题目难度: 1(简单),2(一般),3(困难)
        create_date: '', //	否	string	创建日期
        page: 1, //	否	string	页码 默认为1
        limit: 10
      }
    },
    // 导出题库
    async exportExcel() {
      const res = await questionList({ page: 1, limit: 9999 })
      const newArr = res.data.data.items.map((item) => {
        return [
          item.title.replace(/<[^<>]+>/g, '').replace(/&nbsp;/ig, ''),
          item.subject,
          item.step,
          item.enterprise,
          item.type,
          item.status,
          item.username,
          item.difficulty
        ]
      })
      export_json_to_excel({
        header: ['题目', '学科', '阶段', '企业', '类型', '等级', '作者', '难度'],
        data: newArr,
        filename: '题库列表'
      })
    },
    // 新增题库事件
    addEvent() {
      this.$refs.add.isShow = true
      this.$refs.add.mode = 'add'
    },
    // 编辑题库
    editEvent(row) {
      // 打开弹框修改标题
      this.$refs.add.mode = 'edit'
      this.$refs.add.isShow = true
      // 数据回显
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
      this.$refs.add.form.type = row.type.toString()
      this.$refs.add.form.city = row.city.split(',')
      this.$refs.add.form.multiple_select_answer = row.multiple_select_answer.split(',')
      console.log('编辑数据', row)
    },
    // 删除题库
    delEvent(row) {
    // 弹出确认弹框
      this.$confirm('您确认删除该题目吗?', '温馨提示').then(async(result) => {
        if (result) {
          await questionRemove(row)
          // 提示用户
          this.$message.success('删除成功')
          if (this.form.page > 1 && this.list.length === 1) { this.form.page-- }
          // 刷新列表
          this.getData()
        }
      }).catch(() => {})
    },
    // 禁用开启
    async setStatus(row) {
      await questionStatus(row)
      this.getData()
    }

  }

}
</script>

<style lang='scss' scoped>
.question{
  padding:20px;
  background-color: #ccc;
  .pagination{
    text-align: center;
    background-color: #fff;
    padding-top: 10px;
  }
}

</style>
